<html>
	<head>
		<title>Graphin Clock Demo</title>
<style type="text/css"> 
	body { 
		font-family:Verdana; font-size:10pt; 
		width:100%%; height:100%%;  
		background-image: url(stone.png);
		padding:10px;
		margin:0;
	}

	.graphin-clock {
	   behavior:graphin-clock;
	   width:153px;
	   height:153px;

       /* clock face */	   
	   background-image:url(clock-images/clock-back.png);
	   background-repeat:no-repeat;	   
	   background-position:50% 50%; /* middle center */
	   
	   /* clock glass */	   
	   foreground-image:url(clock-images/clock-fore.png);
	   foreground-repeat:no-repeat;	   
	   foreground-position:50% 50%; /* middle center */

     
	   /* our behavior will these for "hands" coloring */     
     -hand-hours: #000;
     -hand-minutes: #00a;
     -hand-seconds: #a00;
     
     -hand-hours-width: 3pt; 
     -hand-minutes-width: 2pt; 
     -hand-seconds-width: 1pt; 
     
	}	
	.gdi-clock 
  {
	   behavior:clock;
	   /*color:black;  our behavior will use it for "hands" */
	   width:153px;
	   height:153px;

       /* clock face */	   
	   background-image:url(clock-images/clock-back.png);
	   background-repeat:no-repeat;	   
	   background-position:50% 50%; /* middle center */
	   
	   /* clock glass */	   
	   foreground-image:url(clock-images/clock-fore.png);
	   foreground-repeat:no-repeat;	   
	   foreground-position:50% 50%; /* middle center */
	}	
  
	
	popup 
	{ 
	  background-image: url(stone-light.png); 
	  padding:4px;
	  border: 1px solid gray;
	}

	
</style>
	</head>
	<body>
		<h1>Clock behavior demo</h1>
    <div style="flow:horizontal; border-spacing:12px;">
      <center>Graphin clock<br/>  
        <img class="graphin-clock" titleid="popup-clock" caption="graphin" />
      </center>
      <center>GDI clock<br/>  
        <img class="gdi-clock" titleid="popup-clock" />    
      </center>
    </div>
		<p>Place mouse over the clock to see its popup version</p>
	  	<popup id="popup-clock">
      <!-- our behavior is aware of dual attributes (from DOM and from CSS)-->
		   <div class="graphin-clock" caption="popup"
          hand-hours=#0a0  
          hand-minutes=#00a
          hand-seconds=#a00        
       ></div>
		</popup>
	</body>
</html>
